import React, {useEffect, useState} from 'react';
import {Button, Cell, Input, SwipeCell} from "react-vant";

const NoteApp: React.FC = () => {
  const [notes, setNotes] = useState<Array<string>>(JSON.parse(localStorage.getItem('notebook') as string) || []);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    localStorage.setItem('notebook', JSON.stringify(notes));
  }, [notes])

  const handleAddNote = () => {
    if (inputValue.trim() !== '') {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      setNotes([inputValue, ...notes]);
      setInputValue('');
    }
  };


  const handleDeleteNote = (index: string) => {
    const updatedNotes = [...notes];
    updatedNotes.splice(Number(index), 1);
    setNotes(updatedNotes);
  };

  return (
    <div>
      <Cell></Cell>
      <Cell></Cell>
      <Cell style={{height: '8vh', fontSize: 20}}>
        <Input
          placeholder="记录一下想做的事吧💁"
          suffix={<Button size="small" type="primary" onClick={handleAddNote}>添加</Button>}
          value={inputValue} onChange={setInputValue}
        />
      </Cell>
      <ul>
        {notes?.map((note, index) => (
          <SwipeCell
            key={index}
            rightAction={
              <Button style={{height: '100%'}} square type="danger" onClick={() => handleDeleteNote(String(index))}>
                删除
              </Button>
            }
          >
            <Cell title={note} style={{height: '8vh', fontSize: 20}}/>
          </SwipeCell>
        ))}
      </ul>
    </div>
  );
};

export default NoteApp;
